{% extends 'base/base.html' %}

{% block title %}确认删除用户 - 多用户报警系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card border-danger">
            <div class="card-header bg-danger text-white">
                <div class="d-flex justify-content-center align-items-center mb-2">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true" style="font-size: 1.5rem; margin-right: 10px;"></i>
                    <h3 class="text-center">确认删除用户</h3>
                </div>
            </div>
            <div class="card-body">
                <div class="alert alert-danger mb-4">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i> 您确定要删除用户 <strong>{{ user.username }}</strong> 吗？
                </div>
                
                <div class="mb-4">
                    <h5><i class="fa fa-info-circle" aria-hidden="true"></i> 删除影响：</h5>
                    <ul class="list-group">
                        <li class="list-group-item">该用户的所有个人信息将被永久删除</li>
                        <li class="list-group-item">该用户参与的所有项目将保留，但该用户将被移除</li>
                        <li class="list-group-item">删除操作不可撤销</li>
                    </ul>
                </div>
                
                <div class="mb-4">
                    <h5><i class="fa fa-user-o" aria-hidden="true"></i> 用户信息：</h5>
                    <div class="list-group">
                        <div class="list-group-item">
                            <strong>用户名：</strong> {{ user.username }}
                        </div>
                        <div class="list-group-item">
                            <strong>角色：</strong> <span class="badge {% if user.is_super_admin %}bg-primary{% else %}bg-secondary{% endif %}">{{ user.get_role_display }}</span>
                        </div>
                        <div class="list-group-item">
                            <strong>邮箱：</strong> {{ user.email|default:'-' }}
                        </div>
                        <div class="list-group-item">
                            <strong>手机号：</strong> {{ user.phone|default:'-' }}
                        </div>
                        <div class="list-group-item">
                            <strong>加入时间：</strong> {{ user.date_joined|date:'Y-m-d H:i' }}
                        </div>
                    </div>
                </div>
                
                <form method="post">
                    {% csrf_token %}
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-danger btn-lg" id="delete-button">
                            <i class="fa fa-trash" aria-hidden="true"></i> 确认删除
                        </button>
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-secondary btn-lg">
                            <i class="fa fa-times" aria-hidden="true"></i> 取消
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为删除按钮添加二次确认
        const deleteButton = document.getElementById('delete-button');
        if (deleteButton) {
            deleteButton.addEventListener('click', function(e) {
                // 阻止默认提交行为
                e.preventDefault();
                
                // 显示二次确认对话框
                if (confirm('确定要永久删除用户 "{{ user.username }}" 吗？此操作不可撤销！')) {
                    // 如果用户确认，则提交表单
                    this.closest('form').submit();
                }
            });
        }
        
        // 为按钮添加悬停效果
        const buttons = document.querySelectorAll('.btn');
        buttons.forEach(button => {
            button.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-1px)';
                this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
            });
            button.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = 'none';
            });
        });
    });
</script>
{% endblock %}